const resolvePath = require('./paths')
const { DefinePlugin } = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const MyPlugin = require('./plugins/MyPlugin')
const commonConfig = require('./webpack.common')
const { merge } = require('webpack-merge')

//vue-loader 开发环境配置
const devConfig = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    output: {
        filename: './js/[name].bundle.[chunkhash:6].js',
        path: resolvePath('dist'),
    },
    // https://caniuse.com/usage-table 查看比例
    // browserslist web node 默认值 browserslist
    target: 'web', // 设为这个值后，导出的webpackbootstrap源代码才能做兼容 'web' 避免HDM与.browserslistrc冲突 默认 browserslist
    devServer: {
        hot: 'only', // hotOnly: true, hot: true
        port: 8080,
        open: false, // 自动打开浏览器
        compress: true, // 启用 gzip
        historyApiFallback: true, // HTML5 History API
        static: './public' // 不放到打包中的静态资源文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                    },
                    'less-loader'
                ]
            },
            {
                test: /\.(png|svg|gif|jpe?g)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
            },
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:3][ext]'
                }
            },
            {
                test: /.md$/,
                use: [
                    'html-loader',
                    './loaders/markdown-loader'
                ]
            }
            // webpack 5.0用source已默认加载资源 如放开，则会影响HtmlWebpackPlugin
            // {
            //     test: /\.html$/,
            //     use: [
            //         {
            //             loader: 'html-loader',
            //             options: {
            //                 // attrs: ['img:src', 'a:href'] // 支持html中的资源
            //             },
            //         }
            //     ]
            // }
        ]
    },
    plugins: [
        new DefinePlugin({ // webpack中植入全局变量
            BASE_URL: '"./"' // 直接解析字符串后替换，所以需要外面再包一层
        }),
        new HtmlWebpackPlugin({ // index.html中的变量
            title: 'copyWebpackPlugin',
            template: './public/index.html'
        }),
        // new MyPlugin()
    ],
}

const config = merge(devConfig, commonConfig)

module.exports = config